<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #test {
        width: 100px;
        height: 100px;
        background: #000;
    }
    </style>
</head>
<body>
    <div id="test">
        <br />
    </div>

<script src="js/css3Animate.js" ></script>

<script >
Animate('#test')
    .to(500, 400)
    .scale(.6)
    .rotate(500)
    .set({
        'background-color': 'blue',
        'width': 200
    }).duration(2000)
    .then()
    .set('opacity', .5)
    .set('height', 200)
    .scale(1.5)
    .to(400, 300)
    .duration('1s')
    .then()
    .rotate(45)
    .scale(.7)
    .to(100, 500)
    .set({
        'background-color': 'yellow',
        'width': 300,
        'height' : 150
    })
    .duration('1s')
    .pop()
    .pop()
    .end();
</script></body></html>
